<template>
  <view class="conent">
      <view class="my">
      <view class="my-login">
        <image
          src="https://sns-avatar-qc.xhscdn.com/avatar/1040g2jo310417n3fm0005o9tjdigjsib6d6ld08?imageView2/2/w/120/format/webp|imageMogr2/strip"
          mode="scaleToFill"
        class="img"/>
      </view>

      <view class="my-name">
        <text>LD_周周</text>
        <text>小红书号： 799620341</text>
        <text>IP属地: 河南</text>
      </view>

    </view>
    <view class="constellation">巨蟹座</view>
    <view class="fun">
      <view class="left">
        <view class="item">
          <text>192</text>
          <text>关注</text>
        </view>
        <view class="item">
          <text>79</text>
          <text>粉丝</text>
        </view>
        <view class="item">
          <text>447</text>
          <text>获赞与收藏</text>
        </view>
      </view>
      <view class="right">
        <view class="btn">编辑资料</view>
        <view class="set">设置</view>
      </view>
    </view>

    <view class="my-fun">
      <view class="item">
        <text>购物车</text>
        <text>查看推荐好物</text>
      </view>
      <view class="item">
        <text>主播中心</text>
        <text>进入直播管理</text>
      </view>
      <view class="item">
        <text>创作灵感</text>
        <text>学创作找灵感</text>
      </view>
    </view>
  </view>

  <view class="header">
    <view class="title">
      <text>笔记</text>
    </view>
    <view class="title">
      <text>仅自己可见</text>
    </view>
    <view class="title">
      <text>赞过</text>
    </view>
  </view>
  <view class="divider"></view>
  <view class="guess">
    <navigator
      class="guess-item"
      v-for="item in 10"
      :key="item"
      :url="`/pages/item/item`"
    >
      <image
        class="image"
        mode="aspectFill"
        src="https://img2.imgtp.com/2024/03/22/Y5uhBH2i.jpg"
      ></image>
      <view class="price">
        <text class="small">有同程的朋友吗</text>
        <text class="right">456</text>
      </view>
    </navigator>
  </view>
</template>

<script setup lang="ts">
</script>

<style lang="scss">
.guess {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20rpx;
  .guess-item {
    width: 345rpx;
    padding: 24rpx 20rpx 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #fff;
  }
  .image {
    width: 304rpx;
    height: 304rpx;
    border-radius: 10rpx;
  }
  .images {
    width: 60rpx;
    height: 60rpx;
    border-radius: 100%;
  }
  .name {
    height: 40rpx;
    margin: 10rpx 0;
    font-size: 26rpx;
    color: #262626;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .price {
    line-height: 1;
    margin-top: 10px;
    padding-top: 4rpx;
    color: #000;
    font-size: 26rpx;
  }
  .small {
    font-size: 30rpx;
    margin-left: 10rpx;
  }
  .right {
    float: right;
  }
}
.divider {
  background: #E0E3DA;
  width: 100%;
  height: 5rpx;
  margin-top: 15px;
}
.header {
  border-radius: 5px 5px 5px 5px;
  margin-top: 40rpx;
  display: flex;
  justify-content: space-around;
  .title {
    display: flex;
  }
}
.conent {
  background-color: #ccc;
  background-image: linear-gradient(to top, #e5e5e5 0%, #e2ebf0 100%);
}
.my-fun {
  margin-top: 60rpx;
  display: flex;
  justify-content: space-around;
  .item {
    display: flex;
    flex-direction: column;
    background-color: #cccccc82;
    padding: 20rpx;
    border-radius: 20rpx;
    margin-bottom: 20px;
  }
}
.fun {
  margin-top: 10rpx;
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    .item {
      display: flex;
      flex-direction: column;
      margin-left: 30rpx;
    }
  }
  .right {
    display: flex;
    align-items: center;
    .btn {
      border: 1px solid #ccc;
      padding: 20rpx;
      margin-right: 20rpx;
      border-radius: 20px;
    }
    .set {
      margin-right: 70rpx;
      border-radius: 100%;
    }
  }
}
.my {
  margin-top: 80rpx;
  // background-color: #ccc;
  // height: 200rpx;
  display: flex;
  .my-login {
    margin-left: 60rpx;
    // background-color: #000;
    .img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 100%;
    }
  }
  .my-name {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 20rpx;
  }
  text {
    line-height: 50rpx;
  }
}
.constellation {
  margin-top: 20rpx;
  margin-left: 50rpx;
}
</style>
